<template>
  <details-layout left-title="伴随详情">
    <ul class="head">
      <li class="head-left">
        <img :src="img ? `${BASE64_TYPE}${img}` : '/static/default/head.png'"/>
        <span class="name">{{name}}</span>
      </li>
      <li class="head-hr">
        <div class="head-hr-line">
          <span>同行伴随{{accompanyData.times}}次</span>
        </div>
      </li>
      <li class="head-right">
        <img :src="accompanyData.xp ? `${BASE64_TYPE}${accompanyData.xp}` : '/static/default/head.png'"/>
        <span class="name">{{accompanyData.xm}}</span>
      </li>
    </ul>
    <details-group class="body" title="以下是共同伴随轨迹" :title-border="true">
      <axis-y class="track" :data="trackData" v-if="trackData.length > 0"></axis-y>
      <span class="tip-null" v-else>暂无数据</span>
    </details-group>
  </details-layout>
</template>

<script>
  import detailsLayout from '../../components/details-layout'
  import detailsGroup from '../../components/details-group'
  import AxisY from '../../components/axis-y'
  import { mapState } from 'vuex'

  export default {
    name: 'accompany',
    components: {
      detailsLayout,
      detailsGroup,
      AxisY
    },
    directives: {},
    mixins: [],
    data() {
      return {
        index: 5,
        trackData: []
      }
    },
    watch: {},
    methods: {},
    computed: {
      ...mapState('personStore', {
        accompanyData: 'accompanyData',
        name: 'name',
        img: 'img'
      })
    },
    created() {
      console.log('name', this.name)
      console.log('img', this.img)
      this.trackData = this.accompanyData.gtbs.map(item => {
        return {
          time: item.hdsj,
          address: item.hdnr
        }
      })
    }
  }
</script>

<style scoped lang="scss">
  .head {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 1.2rem 2rem;
    overflow: hidden;
    background-color: #fbfbfb;
    > li {
      position: relative;
      text-align: center;
      flex-basis: 0;
      > img {
        width: 100%;
        height: 100%;
      }
      > .name {
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        line-height: 1.3;
      }
    }
    &-left {
      flex-grow: 1;
      border: 1px solid #eee;
    }
    &-right {
      flex-grow: 1;
      border: 1px solid #eee;
    }
    &-hr {
      flex-grow: 1.5;
      flex-shrink: 0;
      &-line {
        border-top: .3rem solid #ff9933;
        margin: 40% 1rem 0;
        height: 0;
        padding: 0 .8rem;
        position: relative;
        &:after {
          border: .5rem solid transparent;
          border-left: .8rem solid #ff9933;
          width: 0;
          height: 0;
          position: absolute;
          bottom: -0.3rem;
          right: -1rem;
          content: ' ';
        }
        &:before {
          border: .5rem solid transparent;
          border-right: .8rem solid #ff9933;
          width: 0;
          height: 0;
          position: absolute;
          bottom: -0.3rem;
          left: -1rem;;
          content: ' ';
        }
        > span {
          color: #333;
        }
      }

    }
  }

  .body {
    .track {
      padding-left: 0;
    }
  }
</style>
